<ng-container
  *ngIf="{
    selectedItem: selectedItem$ | async,
    filteredItems: filteredItems$ | async
  } as data"
>
  <div class="d-flex">
    <div
      id="{{ dropdownId }}-dropdown"
      class="flex-fill mw0"
      ngbDropdown
      #dropdown="ngbDropdown"
      (openChange)="onDropdownOpenChange($event)"
      #dropdownElement
    >
      <button
        type="button"
        class="btn btn-custom dropdown-toggle"
        role="button"
        ngbDropdownToggle
        [disabled]="customValue.disabled"
      >
        <div
          *ngIf="data.selectedItem?.value !== null"
          class="dropdown-toggle-label"
        >
          <span
            *ngIf="data.selectedItem?.label"
            [ngClass]="data.selectedItem?.classes"
            >{{ data.selectedItem.label }}</span
          >
          <span
            *ngIf="!data.selectedItem?.label"
            [ngClass]="placeholderClasses ? placeholderClasses : 'text-muted'"
            >{{ placeholder }}</span
          >
        </div>
      </button>

      <div
        id="{{ dropdownId }}-dropdown-menu"
        class="dropdown-menu {{
          enableCustomInput ? 'dropdown-menu-with-fixed-search' : ''
        }}"
        [ngStyle]="{
          'min-width': dropdownElement.getBoundingClientRect().width + 'px',
          'max-width':
            window.innerWidth -
            dropdownElement.getBoundingClientRect().left -
            10 +
            'px'
        }"
        ngbDropdownMenu
      >
        <div *ngIf="enableCustomInput" class="custom-value">
          <input
            #customValueInput
            type="text"
            [placeholder]="customInputPlaceholder"
            class="form-control"
            [formControl]="customValue"
            (keydown)="enterCustomValue($event)"
            [mask]="validation.mask"
            [patterns]="validation.maskPatterns"
          />
        </div>

        <div class="dropdown-menu-content">
          @for (item of data.filteredItems; track $index) {
            <h6 *ngIf="item.category" class="dropdown-header">
              {{ item.label }}
            </h6>

            <button
              *ngIf="!item.category"
              #dropdownMenuItems
              type="button"
              class="btn dropdown-item d-flex"
              [ngClass]="{ 'ps-4': hasCategory }"
              ngbDropdownItem
              (click)="setValue(item)"
              (keydown)="itemKeydown(item, $event)"
              [disabled]="disabledList?.includes(item.value)"
            >
              <span class="text-truncate" [ngClass]="item.classes">{{
                item.label
              }}</span>
            </button>
          } @empty {
            <div class="message message-md text-start p-btn">
              {{ emptyListMessage }}
            </div>
          }
        </div>
      </div>
    </div>

    <button
      *ngIf="clearable && data.selectedItem?.value !== defaultClearValue"
      type="button"
      (click)="clearValue()"
      class="btn btn-custom"
      ngbTooltip="Clear selection"
    >
      <app-svg icon="clear"></app-svg>
    </button>
  </div>
</ng-container>
